<template>
	<view class="wrapper-index">
		<view class="header flex bg-white ceiling-white-notop solid-bottom" id="ceiling" >
			<navigator url="../other/searchBox/search" open-type="navigate" class="search"><view class="cuIcon-search"></view></navigator>
			<view class="nuter">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
					<view class="cu-item" :class="index==TabCur?'active':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
						{{tabList[index].name}}
					</view>
				</scroll-view>
			</view>
		</view>
		
		<home v-if="tabList[TabCur].value=='home'"></home>
		<commodity v-if="tabList[TabCur].value=='commodity'"></commodity>
		<news v-if="tabList[TabCur].value=='news'"></news>
		<usercomment v-if="tabList[TabCur].value=='usercomment'"></usercomment>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				tabList:[
					{name:"首页",value:"home"},
					{name:"全部",value:"commodity"},
					{name:"上新",value:"news"},
					{name:"会员反馈",value:"usercomment"}
				]
			}
		},
		onLoad() {
			uni.setTabBarBadge({
			  index: 2,
			  text: '10'
			})
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper-index{
		padding-top: 50px;
		.header{
			height: 50px;
			line-height: 50px;
			.search{
				color: #000;
				font-size: 22px;
				margin: 0px 15px;
			}
			.nuter{
				width:84vw;
				>view{
					// flex: 1;
					margin-right: 15px;
					// font-size: 16px;
					text-align: center;
					transition: all 0.5s ease .1s;
				}
				.active{
					color: #000;
					font-size: 22px;
				}
			}
		}
	}
	
	
</style>
